<template>
    <div class="order">
        <VHeader title="民星联线"/>
        <van-list
                v-if="list.length > 0"
                v-model="loading"
                :finished="finished"
                @load="getList"
        >
            <div class="flex card" v-for="item in list" :key="item.articleId" @click="$router.push('/article/detail/'+item.articleId)">
                <div class="thumb">
                    <img :src="item.thumbImage" width="100%" />
                </div>
                <div class="content">
                    <div class="content-title"><strong>{{item.title}}</strong></div>
                    <div  v-html="item.contents"></div>
                </div>
            </div>
        </van-list>
        <div v-else class="flex flex-center flex-align-center no-more">
            <div>
                <img src="../../../static/img/no_data.png" width="150" />
                <p>没有更多数据</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                selectedCode: [],
                selectedName: [],
                selectedIndex: 0,
                page: 1,
                loading: false,
                finished: false,
            }
        },
        methods: {
            async getList() {
                this.loading = true;
                try {
                    let list = await this.$http({
                        page: this.page++,
                        method: 'api.article.getCelebrityList',
                    })
                    if(list.data.list.length <= 0){
                        this.finished = true;
                    }
                    this.list = this.list.concat(list.data.list);
                }catch (e) {
                
                }
                this.loading = false;
            }
        },
        mounted() {
            this.getList()
        }
    }
</script>
<style lang="scss" scoped>
    .title {
        padding: 0.3rem 0;
        font-size: 150%;
        color: #F65D5D;
    }
    .no-more {
        text-align:center;
        margin-top: 50px;
    }
    .card {
        font-size:14px;
        margin: 10px;
        padding: 15px;
        border-bottom: 1px solid #CBCACA;
        .thumb {
            width: 34%;
        }
        .content {
            width: 58%;
            padding: 0 4%;
            height: 125px;
            overflow:hidden;
            .content-title {
                font-size: 120%;
                padding-bottom: 0.2rem;
            }
        }
    }
</style>